<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid</title>
  <!-- 文档公共样式 及组件特有示例样式-->
  <link rel="stylesheet" href="../../docs.css" />
  <!-- 组件样式（全部的） -->
  <link rel="stylesheet" href="../../dist/tdesign.css">

  <link rel="stylesheet" href="https://tdesign.gtimg.com/icon/0.0.3/fonts/index.css">
</head>

<body>
  <div class="tdesign-demo-wrap tdesign-demo-wrap--grid">

    <!-- 开发者信息 -->
    <div class="tdesign-demo-wrap__name">
      <h1 class="">Grid</h1>
      <p class="tdesign-demo-wrap__info">开发者：kyrielin</p>
      <p class="tdesign-demo-wrap__info">创建日期：2020-10-15</p>
      <p class="tdesign-demo-wrap__info">说明：TDesign Grid</p>
    </div>

    <!-- 组件开始区 -->


    <!-- 默认样式 -->
    <div class="tdesign-demo-item tdesign-demo-item--grid">
      <h2 class="tdesign-demo-item__title">基础栅格</h2>

      <!-- 灰底区域 可多个 -->
      <div class="tdesign-demo-item__body">

        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <div class="t-row">
            <div class="t-col t-col-6">
              <div>col-6</div>
            </div>
            <div class="t-col t-col-6">
              <div>col-6</div>
            </div>
          </div>
          <div class="t-row">
            <div class="t-col t-col-4">
              <div>col-4</div>
            </div>
            <div class="t-col t-col-4">
              <div>col-4</div>
            </div>
            <div class="t-col t-col-4">
              <div>col-4</div>
            </div>
          </div>
          <div class="t-row">
            <div class="t-col t-col-3">
              <div>col-3</div>
            </div>
            <div class="t-col t-col-3">
              <div>col-3</div>
            </div>
            <div class="t-col t-col-3">
              <div>col-3</div>
            </div>
            <div class="t-col t-col-3">
              <div>col-3</div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>
    </div>

    <!-- 左右偏移 -->
    <div class="tdesign-demo-item tdesign-demo-item--grid">
      <h2 class="tdesign-demo-item__title">左右偏移</h2>

      <!-- 灰底区域 可多个 -->
      <div class="tdesign-demo-item__body">

        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <div class="t-row">
            <div class="t-col t-col-4">
              <div>col-4</div>
            </div>
            <div class="t-col t-col-4 t-col-offset-4">
              <div>col-4 offset-4</div>
            </div>
          </div>
          <div class="t-row">
            <div class="t-col t-col-4 t-col-offset-6">
              <div>col-4 offset-6</div>
            </div>
            <div class="t-col t-col-6 t-col-offset-4">
              <div>col-6 offset-4</div>
            </div>
          </div>
          <div class="t-row">
            <div class="t-col t-col-2 t-col-offset-6">
              <div>col-2 offset-6</div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>
    </div>

    <!-- 左右偏移 -->
    <div class="tdesign-demo-item tdesign-demo-item--grid">
      <h2 class="tdesign-demo-item__title">栅格排序</h2>

      <!-- 灰底区域 可多个 -->
      <div class="tdesign-demo-item__body">

        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <div class="t-row">
            <div class="t-col t-col-8 t-col-push-4">
              <div>col-8 col-pull-4</div>
            </div>
            <div class="t-col t-col-4 t-col-pull-8">
              <div>col-4 col-pull-8</div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>
    </div>

    <!-- 排版 -->
    <div class="tdesign-demo-item tdesign-demo-item--grid">
      <h2 class="tdesign-demo-item__title">排版</h2>

      <!-- 灰底区域 可多个 -->
      <div class="tdesign-demo-item__body">

        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <div class="t-row t-row-start">
            <div class="t-col t-col-3">
              <div>col-3</div>
            </div>
            <div class="t-col t-col-3">
              <div>col-3</div>
            </div>
            <div class="t-col t-col-3">
              <div>col-3</div>
            </div>
            <div class="t-col t-col-3">
              <div>col-3</div>
            </div>
          </div>
          <div class="t-row t-row-center">
            <div class="t-col t-col-3">
              <div>col-3</div>
            </div>
            <div class="t-col t-col-3">
              <div>col-3</div>
            </div>
            <div class="t-col t-col-3">
              <div>col-3</div>
            </div>
            <div class="t-col t-col-3">
              <div>col-3</div>
            </div>
          </div>
          <div class="t-row t-row-end">
            <div class="t-col t-col-3">
              <div>col-3</div>
            </div>
            <div class="t-col t-col-3">
              <div>col-3</div>
            </div>
            <div class="t-col t-col-3">
              <div>col-3</div>
            </div>
            <div class="t-col t-col-3">
              <div>col-3</div>
            </div>
          </div>
          <div class="t-row t-row-space-between">
            <div class="t-col t-col-3">
              <div>col-3</div>
            </div>
            <div class="t-col t-col-3">
              <div>col-3</div>
            </div>
            <div class="t-col t-col-3">
              <div>col-3</div>
            </div>
            <div class="t-col t-col-3">
              <div>col-3</div>
            </div>
          </div>
          <div class="t-row t-row-space-around">
            <div class="t-col t-col-3">
              <div>col-3</div>
            </div>
            <div class="t-col t-col-3">
              <div>col-3</div>
            </div>
            <div class="t-col t-col-3">
              <div>col-3</div>
            </div>
            <div class="t-col t-col-3">
              <div>col-3</div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>
    </div>

    <!-- 对齐 -->
    <div class="tdesign-demo-item tdesign-demo-item--grid">
      <h2 class="tdesign-demo-item__title">对齐</h2>

      <!-- 灰底区域 可多个 -->
      <div class="tdesign-demo-item__body">

        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <div class="t-row t-row-space-around t-row-top">
            <div class="t-col t-col-3" style="height: 100px;">
              <div>col-3</div>
            </div>
            <div class="t-col t-col-3">
              <div>col-3</div>
            </div>
            <div class="t-col t-col-3" style="height: 100px;">
              <div>col-3</div>
            </div>
            <div class="t-col t-col-3">
              <div>col-3</div>
            </div>
          </div>
          <div class="t-row t-row-space-around t-row-middle">
            <div class="t-col t-col-3" style="height: 100px;">
              <div>col-3</div>
            </div>
            <div class="t-col t-col-3">
              <div>col-3</div>
            </div>
            <div class="t-col t-col-3" style="height: 100px;">
              <div>col-3</div>
            </div>
            <div class="t-col t-col-3">
              <div>col-3</div>
            </div>
          </div>
          <div class="t-row t-row-space-around t-row-bottom">
            <div class="t-col t-col-3" style="height: 100px;">
              <div>col-3</div>
            </div>
            <div class="t-col t-col-3">
              <div>col-3</div>
            </div>
            <div class="t-col t-col-3" style="height: 100px;">
              <div>col-3</div>
            </div>
            <div class="t-col t-col-3">
              <div>col-3</div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>
    </div>

    <!-- 排序 -->
    <div class="tdesign-demo-item tdesign-demo-item--grid">
      <h2 class="tdesign-demo-item__title">排序</h2>

      <!-- 灰底区域 可多个 -->
      <div class="tdesign-demo-item__body">

        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <div class="t-row t-row-space-around t-row-top">
            <div class="t-col t-col-3 t-col-order-4">
              <div>1 col-order-4</div>
            </div>
            <div class="t-col t-col-3 t-col-order-3">
              <div>2 col-order-3</div>
            </div>
            <div class="t-col t-col-3 t-col-order-2">
              <div>3 col-order-2</div>
            </div>
            <div class="t-col t-col-3 t-col-order-1">
              <div>4 col-order-1</div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>
    </div>

    <!-- 响应式布局 -->
    <div class="tdesign-demo-item tdesign-demo-item--grid">
      <h2 class="tdesign-demo-item__title">响应式布局</h2>

      <!-- 灰底区域 可多个 -->
      <div class="tdesign-demo-item__body">

        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <div class="t-row t-row-space-around t-row-top">
            <!-- t-col-断点-占比数 t-col-断点-offset-占比数 -->
            <div class="t-col t-col-xs-2 t-col-xs-offset-1 t-col-xl-1 t-col-lg-4">
              <div>Col</div>
            </div>
            <div class="t-col t-col-xs-2 t-col-xs-offset-1 t-col-xl-1 t-col-lg-4">
              <div>Col</div>
            </div>
            <div class="t-col t-col-xs-2 t-col-xs-offset-1 t-col-xl-1 t-col-lg-4">
              <div>Col</div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>
    </div>

  </div>

</body>

</html>